<template>
  <div class="tutorial">
    <h2>🎯 路由传参学习（params / query / props）</h2>
    <p>路由可通过 <code>params</code>、<code>query</code> 与 <code>props</code> 在组件间传递数据。</p>

    <h3>示例配置：params + props 映射</h3>
    <pre class="code"><code>const routes = [
  {
    path: '/users/:id',
    name: 'UserDetail',
    component: UserDetailView,
    props: route => ({ id: Number(route.params.id), tab: route.query.tab })
  }
]</code></pre>

    <h3>组件中读取</h3>
    <pre class="code"><code>import { useRoute } from 'vue-router'
const route = useRoute()
// params：route.params.id
// query：route.query.tab
// 通过 props 接收：defineProps({ id: Number, tab: String })</code></pre>

    <h3>当前路由示例（实时）</h3>
    <div class="current">
      <div>fullPath：<code>{{ route.fullPath }}</code></div>
      <div>params：<code>{{ JSON.stringify(route.params) }}</code></div>
      <div>query：<code>{{ JSON.stringify(route.query) }}</code></div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<style scoped>
.tutorial { padding: 20px; }
h2 { margin-bottom: 10px; }
h3 { margin-top: 20px; margin-bottom: 8px; }
.code { background: #1e1e1e; color: #d4d4d4; padding: 12px; border-radius: 8px; overflow:auto; }
.current { padding:10px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; }
.current code { color:#0f172a; }
</style>